<template>
  <div class="nav_box">
    <Nav />
    <Menu />
  </div>
  <div class="bg-img">
    <img src="@/assets/info1.jpg" alt="" />
  </div>
  <div class="info-menu">
    <div class="menu-left">
      <div class="menu-box">
        <div
          :class="active == item.id ? 'menu-item-active' : 'menu-item'"
          v-for="item in list"
          :key="item.id"
          @click="change(item)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="menu-right">
      <div class="right-title">
        <span @click="toHome">
          <img src="@/assets/home.png" alt="" />
          <span class="home_title">首页</span>
        </span>
        &nbsp;-&nbsp;
        <span class="active_span"> {{ titleName }} > </span>
      </div>
      <div class="right-item" v-for="item in listInfo" :key="item.id">
        <p class="item-title" @click="goto(item.id)">
          {{ item.smallTitle }}
        </p>
        <p class="item-time">{{ item.createTime.substring(0, 10) }}</p>
      </div>
    </div>
  </div>
  <Footer />
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import Nav from "../components/navBar.vue";
import Menu from "../components/menu.vue";
import Footer from "../components/footer.vue";
import request from "@/request/request";
const router = useRouter();
const list: any = ref([]);
const listInfo: any = ref([]);
const titleName = ref("");
const active = ref("");
onMounted(() => {
  list.value = JSON.parse(String(sessionStorage.getItem("newlist")));
  let key = sessionStorage.getItem("key");
  console.log(key, "key111");

  if (
    key == "quality_1" ||
    key == "quality_2" ||
    key == "quality_3" ||
    key == "valuation_1" ||
    key == "valuation_2" ||
    key == "teaching_1" ||
    key == "teaching_2" ||
    key == "teaching_3"
  ) {
    active.value = key;
  } else {
    let id = list.value[0].id;
    active.value = id;
  }
  titleName.value = list.value[0].name;
  getList();
});
const getList = () => {
  console.log(active.value == "teaching_1", "aaa");

  // 999 新闻
  // 998 工作通知
  // 901 教学质量保障
  // 902 评估和认证
  // 903 教学评价
  if (active.value == "999") {
    request("findLatestNewsList", "post", { bannerType: "advert_type" }).then(
      (res: any) => {
        listInfo.value = res.data.rows;
      }
    );
  } else if (active.value == "998") {
    request("findNoticeList", "post", { bannerType: "advert_type" }).then(
      (res: any) => {
        listInfo.value = res.data.rows;
      }
    );
  } else if (active.value == "901") {
    // 教学质量保障
    request("findTecherQualityAssurance", "post", {
      bannerType: "advert_type",
    }).then((res: any) => {
      listInfo.value = res.data.rows;
    });
  } else if (active.value == "902") {
    request("findEvalAndVerify", "post", { bannerType: "advert_type" }).then(
      (res: any) => {
        listInfo.value = res.data.rows;
      }
    );
  } else if (active.value == "903") {
    request("findInstructionEval", "post", { bannerType: "advert_type" }).then(
      (res: any) => {
        listInfo.value = res.data.rows;
      }
    );
  } else if (
    active.value == "quality_1" ||
    active.value == "quality_2" ||
    active.value == "quality_3" ||
    active.value == "valuation_1" ||
    active.value == "valuation_2" ||
    active.value == "teaching_1" ||
    active.value == "teaching_2" ||
    active.value == "teaching_3"
  ) {
    let data = new FormData();
    data.set("type", active.value);
    request("findTecherQualityList", "post", data).then((res: any) => {
      listInfo.value = res.data.rows;
    });
  }
};
const goto = (id: number) => {
  // const routeData = router.resolve(`/news?id=${id}`);
  const routeData = router.resolve({
    path: "/news",
    query: { id },
  });
  // sessionStorage.setItem("news_info", JSON.stringify(item));
  window.open(routeData.href, "_blank");
  // const routeData = router.resolve({
  //   path: "/news",
  // });
  // window.open(routeData.href, "_blank");
};
const toHome = () => {
  const routeData = router.resolve({
    path: "/home",
  });
  // sessionStorage.setItem("news_info", JSON.stringify(item));
  window.open(routeData.href, "_blank");
};
const change = (item: any) => {
  active.value = item.id;
  titleName.value = item.name;

  getList();
};
</script>

<style lang="scss" scoped>
.nav_box {
  width: 100%;
  background-image: url("@/assets/na_bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // margin-bottom: 0.625rem;
}
.bg-img {
  width: 100%;
  img {
    width: 100%;
  }
}
.info-menu {
  width: 75rem;
  display: flex;
  .menu-left {
    width: 18.75rem;
    position: relative;
    .menu-box {
      width: 100%;
      position: absolute;
      top: 0rem;
      z-index: 9;
      .menu-item {
        width: 100%;
        height: 4.375rem;
        box-sizing: border-box;
        padding-left: 1.25rem;
        background-color: #f6f6f6;
        line-height: 4.375rem;
        cursor: pointer;
        z-index: 9;
        transition: 0.7s;
      }
      .menu-item-active {
        width: 100%;
        height: 4.375rem;
        box-sizing: border-box;
        padding-left: 1.25rem;
        background: linear-gradient(to right, #06458b, #8aaee6);
        color: #fff;
        line-height: 4.375rem;
        cursor: pointer;
        z-index: 9;
      }
    }
  }
  .menu-right {
    width: 56.25rem;
    height: 37.5rem;
    padding: 1rem 1.875rem 1.25rem;
    .right-title {
      width: 100%;
      color: #1e4b9e;
      border-bottom: 0.125rem solid #e5e5e5;
      padding-bottom: 0.5rem;
      display: flex;
      align-items: center;
      img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3125rem;
      }
      .home_title {
        cursor: pointer;
      }
      .active_span {
        font-size: 0.9375rem;
      }
    }
    .right-item {
      display: flex;
      justify-content: space-between;
      line-height: 2.5rem;
      .item-title {
        width: 80%;
        cursor: pointer;
      }
      .item-title :hover {
        color: red;
      }
      .item-time {
        color: #9c9c9c;
      }
    }
  }
}
</style>
